<template>
    <el-dialog
            title="添加用户"
            :visible.sync="message"
            @close="resetFields"
            :show-close="false"
            width="40%">
        <!--        内容-->
        <span>
            <el-form ref="userFormRef" :model="userForm" label-width="80px" :rules="userRules">
                <el-form-item label="用户" prop="username">
                    <el-input v-model="userForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="userForm.password" type="password"></el-input>
                </el-form-item>
                 <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userForm.email"></el-input>
                </el-form-item>
                 <el-form-item label="手机" prop="mobile">
                    <el-input v-model="userForm.mobile"></el-input>
                </el-form-item>
            </el-form>
        </span>
        <!--        对话框底部-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible">取 消</el-button>
            <el-button type="primary" @click="addUserM">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
    import {addUser} from "../../../network/users";

    export default {
        name: "AddUserDialog",
        props:{
            message:{
                type:Boolean,
                default(){
                    return false
                }
            }
        },
        data(){
            //手机号校验
            const mobileCheck = (rule,value,cb) => {
                const regExp = /^1[3456789]\d{9}$/;
                if(regExp.test(value)){
                    return cb();
                }
                cb(new Error('请输入正确的手机号'));
            };
           return{
               userForm:{
                   username:'',
                   password:'',
                   email:'',
                   mobile:''
               },
               //表单校验规则
               userRules: {
                   username: [
                       {required: true, message: '请输入用户名', trigger: 'blur'},
                       {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                   ],
                   password: [
                       {required: true, message: '请输入密码', trigger: 'blur'},
                       {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                   ],
                   email:[
                       {type:"email",message: '请输入正确的邮箱', trigger: 'blur'},
                   ],
                   mobile:[
                       //自定义校验规则
                       {validator:mobileCheck,trigger:'blur'}
                   ]
               },
           }
        },
        methods:{
            editVisible(){
                this.$bus.$emit('dialog');
            },
            resetFields(){
                //表单重置
                this.$refs.userFormRef.resetFields();
            },
            //监听添加用户事件
            addUserM(){
                //表单预验证，若为true 发送网络请求
                this.$refs.userFormRef.validate(valid => {
                    // console.log(valid);
                    if (valid){
                        //网络请求添加用户信息
                        console.log(this.userForm);
                        addUser(this.userForm).then(res => {
                            // console.log(res);
                            if (res.data.meta.status === 201){
                                this.$bus.$emit('getUserB');
                                this.$message.success(res.data.meta.msg);
                                this.$bus.$emit('dialog');
                            }else{
                                this.$message.warning(res.data.meta.msg)
                            }
                        });
                    }else{
                        this.$message.error('请填写正确信息')
                    }
                });
            }

        }
    }
</script>

<style scoped>

</style>